<template>
<!--租房分期-->
  <el-main>
    <el-card class="box-card" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <span>申请主体信息</span>
      </div>
      <div>
        <el-form ref="elForm" :model="business" size="mini" label-width="100px">
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公寓名称">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="类型">
                <span v-if="business.type==0">个人职业房东</span>
                <span v-else>公司化公寓</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公司名称">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="联系人">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="申请时间">
                <span v-html="business.createTime"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人姓名">
                <span v-html="business.corporation"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人身份证">
                <span v-html="business.certNum"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公司地址">
                <span v-html="business.address"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="账户类型">
                <span v-html="companyAccountDetail.accountType"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="账户">
                <span v-html="companyAccountDetail.brankId"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="开户行">
                <span v-html="companyAccountDetail.brankName"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人身份证">
                <img :src="business.certPicture" height="60px">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <span>租房分期详细信息</span>
      </div>
      <div>
        <el-form ref="elForm" :model="contractDetail" size="mini" label-width="100px">
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租客姓名">
                <span v-html="contractDetail.tenantName"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租客身份证号">
                <span v-html="contractDetail.tenantCardNo"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租客手机号">
                <span v-html="contractDetail.tenantPhone"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="承租房间">
                <span v-html="contractDetail.roomName"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="月租金">
                <span>{{contractDetail.monthRent}} 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="押金">
                <span>{{contractDetail.deposit}} 元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租约起始时期">
                <span v-html="contractDetail.startDate"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租约终止时期">
                <span v-html="contractDetail.endDate"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="还款周期">
                <span>{{contractDetail.paymentType}} 个月</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="还款账期">
                <span>{{this.contractDetail.receiptList.length}} 个月</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="服务费">
                <span>{{installment.serCharge}} 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="利息">
                <span>{{rateCount}} 元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="待收租金合计">
                <span>{{totalMonthLimit}} 元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租房合同">
                <img v-for="item in contractUrl" :src="item.url" height="60px">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租客身份证">
                <img v-for="item in idCardUrl" :src="item.url" height="60px">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <div style="padding: 5px;text-align: center">
      <el-button type="warning" style="margin: 10px" v-if="installment.applyState == 1" @click="checks1(2)">初审通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="installment.applyState == 1" @click="dialogFormVisible=true">初审不通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="installment.applyState == 2" @click="checks1(4)">复审通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="installment.applyState == 2" @click="dialogFormVisible=true">复审不通过</el-button>
    </div>
<!--    审核不通过弹窗-->
    <el-dialog title="审核不通过原因" :visible.sync="dialogFormVisible">
      <el-form :model="check">
        <el-form-item label="审核不通过原因" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="check.auditMemo" autocomplete="off" placeholder="请输入审核不通过原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="installment.applyState == 1" type="primary" @click="dialogFormVisible = false, checks1(3)">确 定</el-button>
        <el-button v-if="installment.applyState == 2" type="primary" @click="dialogFormVisible = false, checks1(5)">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>
</template>

<script>
import {checks, installmentData} from "@/api/banking/applicationscheck/applicationscheck";


export default {
  name: "installment",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      id:undefined,
      //合同详情
      contractDetail: {
        receiptList:[]
      },
      //合同图片
      contractUrl:[],
      //租客身份证
      idCardUrl:[],
      //商户主体
      business:{},
      //账户
      companyAccountDetail:{},
      //分期
      installment:{},
      //利息
      rateCount:undefined,
      //待收租金合计
      totalMonthLimit:undefined,
      //审核用
      check:{
        productType:1,
        applyState:undefined,
        checkId:undefined,
        auditMemo:undefined,
      }
    }
  },
  methods:{
    initData(){
      installmentData({id:this.id}).then(res=>{
        console.log(res.msgData)
        var data = res.msgData;
        this.business = data.business;
        this.companyAccountDetail = data.companyAccountDetail||{}
        this.contractDetail = data.contractDetail
        this.contractUrl = data.contractUrl
        this.idCardUrl = data.idCardUrl
        this.contractUrl = data.contractUrl
        this.installment = data.installment
        this.check.applyState = data.installment.applyState;
        this.check.checkId = data.installment.id;
        this.rateCount = data.rateCount
        this.totalMonthLimit = data.totalMonthLimit
        console.log("check",this.check)
      })
    },
    checks1(applyState){
      this.check.applyState = applyState;
      console.log("check",this.check)
      checks(this.check).then(res=>{
        // 完成按钮
        this.$message.success("审核成功")
        const obj = { path: "/banking/applicationscheck"};
        this.$tab.closeOpenPage(obj);
      })
    },
  },

  created() {
    this.id = this.$route.params.id
    this.initData()
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 960px;
}
</style>
